import { onMounted, ref } from "vue"
import { MessagePlugin } from "tdesign-vue-next"
import { useWindowsWidthStore } from "@/store/windowsWidth"
import { throttle } from "@/utils/throttle"

const store = useWindowsWidthStore()

/**
 * 改变全屏状态
 * @return isFullScreen 是否为全屏
 * @return changeFullScreen 改变全屏状态
 * @return isMobile 是否为手机
 * @description 改变全屏状态。isFullScreen用来改变不同状态下的图标样式，changeFullScreen用来改变全屏状态，
 * isMobile用来判断是否为手机端，若为手机则改变全屏按钮隐藏
 * @example const { isFullScreen, changeFullScreen, isMobile } = fullScreen
 * @author meow
 */
export const useFullScreen = () => {
    const isFullScreen = ref<boolean>(false)
    // 改变全屏状态
    const change = () => {
        const watchFullScreenChange = () => {
            if (!document.fullscreenElement) {
                isFullScreen.value = false
                MessagePlugin("info", "全屏模式已关闭！", 1500).then(() => {
                    document.removeEventListener("fullscreenchange", watchFullScreenChange)
                })
            }
        }
        isFullScreen.value = !isFullScreen.value
        if (isFullScreen.value) {
            document.documentElement.requestFullscreen().then(() => {
                document.addEventListener("fullscreenchange", watchFullScreenChange)
                MessagePlugin("info", "已进入全屏模式！", 1500).then()
            })
        } else {
            document.exitFullscreen().then(() => {
                document.removeEventListener("fullscreenchange", watchFullScreenChange)
            })
        }
    }
    // 节流处理
    const changeFullScreen = throttle(change, 1500)
    // 判断是否为手机
    const isMobile = ref<boolean>(window.innerWidth < 1000)
    onMounted(()=>{
        window.addEventListener("resize", () => {
            isMobile.value = store.windowsWidth < 1000
        })
    })

    return {
        isFullScreen,
        changeFullScreen,
        isMobile
    }

}
